<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>
        用户名： <input type="text" name="username" id="username" >
    </p>
    <p>
        密码：<input type="password" name="password">
    </p>
    <p>
        确认密码：<input type="password" name="rd" idpassword2>
    </p>

    <div id="d1" style="color:red">
        这是一个div
    </div>

    <input type="button" value="通过id获取并弹出用户名输入框中的值" onclick="demo1()">
    <input type="button" value="通过name属性获取并弹出密码输入框中的值" onclick="demo2()">
    <input type="button" value="通过元素名称获取并弹出所有输入框中的值" onclick="demo3()"> <br>

    <input type="button" value="替换div中的内容" onclick="changeDiv()">


    <script>

        function changeDiv(){
            var obj = document.getElementById("d1");

            // console.log(obj)
            // console.log(obj.innerHTML)
            // console.log(obj.innerText)
            //替换div中的内容
            obj.innerHTML = "安辉很帅"
            //部分浏览器不支持
           // obj.innerText = "安辉有一点点帅"
        }


        //通过id获取并弹出用户名输入框中的值
        function demo1(){
            //1. 获取用户名输入框
            var obj = document.getElementById("username");
            console.log(obj)
            //2. 获取输入框中的值
            let v = obj.value;
            //3. 弹出
            alert(v)
        }

        //通过name属性获取并弹出密码输入框中的值
        function demo2(){
            var obj = document.getElementsByName("password")[0];
            alert(obj.value)
        }

        //通过元素名称获取并弹出所有输入框中的值
        function demo3(){
            var objs = document.getElementsByTagName("input");
            for (let i = 0; i < objs.length; i++) {
                alert(objs[i].value)
            }
        }



    </script>
</body>
</html>